<template>
  <div id="details">
    <c-title :hide="false" :text="`${this.fun.initWithdrawal()}详情`"></c-title>
    <div class="tbs">
      <div class="number" style="flex: 100%;">
        <span style="color: #8c8c8c;">{{ this.fun.initWithdrawal() }}编号</span><span>{{ withdraw_sn }}</span>
      </div>
      <div class="left" style="flex: 20%;">
        <span class="">{{ this.fun.initWithdrawal() }}类型</span>
      </div>
      <div class="right" style="flex: 80%;">
        <span class="red">{{ type_name }}</span>
      </div>
      <div class="left" style="flex: 20%;">
        <span class="">{{ this.fun.initWithdrawal() }}方式</span>
      </div>
      <div class="right" style="flex: 80%;">
        <span>{{ pay_way_name }}</span>
      </div>
      <div class="left">{{ this.fun.initWithdrawal() }}金额</div>
      <div class="right">{{ amounts }}元</div>
      <div class="left" style="flex: 20%;">{{ this.fun.initWithdrawal() }}时间</div>
      <div class="right" style="flex: 80%;">{{ created_at }}</div>
      <div class="left">{{ this.fun.initWithdrawal() }}{{ poundage_name }}</div>
      <div class="right">{{ actual_poundage }}元</div>
      <div class="left">{{ this.fun.initWithdrawal() }}{{ fun.getCustomTextLang("income.special_service_tax", "劳务税") }}</div>
      <div class="right">{{ actual_servicetax }}元</div>
      <div class="left">打款金额</div>
      <div class="right" @click="show_detail">{{ actual_amounts }}元&nbsp;></div>
      <div class="left" style="flex: 20%;">备注</div>
      <div class="right" style="flex: 80%;">{{ reject_reason }}</div>
    </div>
    <div class="tbs" v-for="(item, i) in incomes" :key="i">
      <div class="left" style="flex: 40%;">计算金额: {{ item.commission_amount }}元</div>
      <div class="right" style="flex: 60%;">结算方式: {{ item.formula }}</div>
      <div class="left" style="flex: 40%;">佣金: {{ item.commission }}元</div>
      <div class="right" style="flex: 60%;">比例: {{ item.commission_rate }}%</div>
    </div>
    <div class="itemBtn" v-if="new_wx_transfer == 1">
      <div class="btn" @click="confirmReceipt">确认收款</div>
    </div>
    <van-popup v-model="show" closeable round class="popupRoot" ref="popupRoot" position="bottom" :style="{ height: '65%' }">
      <div style="margin-top: 1rem; margin-bottom: 1rem;">详情</div>
      <div style="display: flex; justify-content: space-evenly; margin: 1.5rem 0 1rem;">
        <span style="flex: 1;">收入ID</span>
        <span style="flex: 1;">提现金额</span>
        <span style="margin: 0 0.625rem; flex: 2;">时间</span>
        <span style="flex: 1;">打款状态</span>
      </div>
      <template v-if="amount_detail && amount_detail.data.length !== 0">
        <div style="display: flex; justify-content: space-evenly; margin: 0.5rem 0; color: #9f9f9f;" v-for="(item, i) in amount_detail.data" :key="i">
          <span style="flex: 1;">{{ item.id }}</span>
          <span style="flex: 1;">{{ item.amount }}</span>
          <span style="margin: 0 0.625rem; flex: 2;">{{ item.created_at }}</span>
          <span style="flex: 1;">{{ item.pay_status_name }}</span>
        </div>
      </template>
    </van-popup>
  </div>
</template>
<script>
import member_income_presentationRecord_presentationDetails_controller from "./member_income_presentationRecord_presentationDetails_controller";

export default member_income_presentationRecord_presentationDetails_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#details {
  padding-bottom: 2rem;
  .itemBtn{
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 1rem;
    .btn{
      background: var(--themeBaseColor);
      padding: 0.5rem 0.75rem;
      box-sizing: border-box;
      border-radius: 0.75rem;
      color:#fff;
    }
  }
  .tbs {
    display: flex;
    align-items: center;
    background: #fff;
    flex-flow: row wrap;
    padding: 0.625rem 0.875rem;
    line-height: 1.5rem;
    margin-bottom: 0.625rem;
    font-size: 12px;

    .left {
      text-align: left;
      flex: 65%;
      color: #8c8c8c;
      line-height: 1.875rem;
    }

    .right {
      text-align: right;
      flex: 35%;
      line-height: 1.875rem;
    }

    .red {
      color: red;
    }

    .goods {
      display: flex;
      align-items: stretch;
      flex-flow: row wrap;
      background: #e6e6e6;
      padding: 0.3125rem;
      margin-top: 0.3125rem;
    }

    .img {
      flex: 25%;

      img {
        width: 100%;
        margin-top: 0.4375rem;
      }
    }

    .name {
      flex: 60%;
      text-align: left;
      padding: 0 0.625rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      font {
        flex: 5;
      }

      span {
        flex: 1;
      }
    }

    .option {
      flex: 15%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      font {
        flex: 5;
        text-align: right;
        width: 100%;
      }

      .red {
        flex: 1;
        text-align: right;
        width: 100%;
      }
    }

    .number {
      display: flex;
      justify-content: space-between;
      line-height: 1.875rem;
    }
  }
}
</style>
